<template>
<div class="HobbyUpdate">
  <!--header start-->
  <header class="header-con header-w-bg">
    <router-link to="/setting/userInfo">
      <i class="back-icon"></i>
    </router-link>
    <h1 class="header-tit">真实姓名</h1>
  </header>
  <!--header end-->
  <!-- content start -->
  <div class="my-page">
    <div class="Hobby">
      <!--header start-->
<header class="header-con header-w-bg">
  <a href="personalInfo.html">
    <i class="back-icon"></i>
  </a>
  <h1 class="header-tit">旅游偏好</h1>
</header>
<!--header end-->
<!-- content start -->
<div class="my-page bg-white">
  <ul class="list-ul preferences-list">
    <li v-for='(item, idx) in preferences.content' >
      <div class="list-hd" v-on:click='toggleLi(idx)'>
        <div>{{item.groupDesc}}</div>
        <span class="arrow-box"><i :class='showArr[idx]?"up-icon":"down-icon"'></i></span>
      </div>
      <div class="list-bd" :class='showArr[idx]? "show" : "hide"'>
        <div class="preferences-sel radio-sel">
          <span v-for='(label, index) in item.elementList' :class='label.hasValue==="1"?"active":""' v-on:click='updateLabel(hasValue, item.valueType)'>{{label.elementName}}</span>
        </div>
      </div>
    </li>
  </ul>
  <a href="personalInfo.html" class="submit-btn">
    <div class="org-btn">提交</div>
  </a>
</div>
<!-- content end -->
    </div>
  </div>
  <!-- content end -->
</div>
</template>

<script>
  import qs from 'qs'
  import Vue from 'Vue'
  import axios from 'axios'
  import common from '../../../assets/js/common'
  import weui from 'weui.js'

  export default {
    data () {
      return {
        preferences: {
          'resultCode': '',
          'resultMsg': '',
          'content': []
        },
        showArr: []
      }
    },
    created: function () {
      let self = this
      let config = {
        headers: {
          'access-token': common.accesstoken,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      let userId = common.userid
      let data = qs.stringify({
        'userId': userId
      })
      let queryUrl = common.api.memberCenter.getFindHobby
      let loading = weui.loading('加载中')
      axios.post(queryUrl, data, config).then(function (res) {
        if (res.data.resultMsg === 'success') {
          loading.hide()
          console.log(res.data)
          self.preferences = res.data
          let arr = []
          for (var i = 0; i <= res.data.content.length - 1; i++) {
            var dataItem = res.data.content[i]
            dataItem['show'] = false
            arr.push(false)
          }
          self.showArr = arr
        } else {
          loading.hide()
          weui.toast('请求失败')
          console.log(res.data.resultMsg)
        }
      })
    },
    methods: {
      toggleLi (idx) {
        let show = this.showArr[idx]
        Vue.set(this.showArr, idx, !show)
        // console.log(this.showArr)
      },
      updateLabel (oldVal, valueType) {
        console.log(oldVal)
        if (valueType === 'radio') {
        }
      }
    }
  }
</script>

<style lang='scss'>
.list-ul {
  padding: 0;
  .list-hd {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    height: 44px;
    line-height: 44px;
    padding-right: 44px;
    margin: 0 0 0 16px;
    > div {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      color: #242424;
      font-size: 1.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .arrow-box {
      position: absolute;
      right: 16px;
    }
  }
  > li:not(:last-child) .list-hd:after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    transform: scaleY(0.5);
  }
  .list-bd {
    display: none;
    position: relative;
    margin-top: -1px;
    &:before {
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-bottom: 10px solid #f9f9f9;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      margin: 0 auto;
    }
  }
}

.preferences-list {
  background-color: #fff;
  padding: 0 0 0 16px;
  li {
    position: relative;
    padding: 5px 0;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-bottom: 1px solid #ebebeb;
      transform: scaleY(0.5);
    }
  }
  .list-bd:before {
    display: none;
  }
  .list-hd {
    margin: 0;
    &:after {
      display: none;
    }
  }
}

.preferences-sel {
  position: relative;
  padding: 16px 16px 4px 0;
  overflow: hidden;
  span {
    float: left;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    background-color: #f5f5f5;
    padding: 0 10px;
    margin-bottom: 12px;
    &:not(:last-child) {
      margin-right: 10px;
    }
    &.active {
      background-color: #ffd800;
    }
  }
}

.submit-btn {
  display: block;
  padding: 0 16px;
  margin-top: 36px;
}
.list-ul{
  .list-bd{
    &.show{
      display: block;
    }
    &.hide{
      display: none;
    }
  }
}
</style>
